<template>
  <div>
    <!-- 顶部个人信息卡片 -->
    <q-card class="profile-header-card q-mb-lg">
      <q-card-section class="bg-primary text-white">
        <div class="row items-center q-col-gutter-md">
          <div class="col-12 col-sm-auto">
            <q-avatar size="150px">
              <q-img src="/pic/1.jpg" />
            </q-avatar>
          </div>
          <div class="col-12 col-sm">
            <div class="text-h3">{{ profile.name }}</div>
            <div class="text-h6 q-mt-sm">{{ profile.title }}</div>
            <div class="q-mt-md">
              {{ profile.bio }}
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-section>
        <div class="row q-col-gutter-md">
          <div class="col-12 col-md-6">
            <q-list>
              <q-item v-for="(value, key) in profile.details" :key="key">
                <q-item-section avatar>
                  <q-icon :name="value.icon" color="primary" />
                </q-item-section>
                <q-item-section>
                  <q-item-label caption>{{ value.label }}</q-item-label>
                  <q-item-label>{{ value.value }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-subtitle1">联系方式</div>
            <div class="row q-mt-md q-gutter-sm">
              <q-btn v-for="contact in profile.contacts" :key="contact.name"
                :href="contact.link" target="_blank"
                :icon="contact.icon"
                :color="contact.color"
                :label="contact.name"
                rounded
                outline
                size="md"
              />
            </div>
          </div>
        </div>
      </q-card-section>
    </q-card>

    <div class="row q-col-gutter-md">
      <!-- 左侧 -->
      <div class="col-12 col-md-8">
        <q-card class="q-mb-md">
          <q-card-section>
            <div class="text-h5 q-mb-md">关于我</div>
            <p v-for="paragraph in profile.aboutMe" :key="paragraph.slice(0, 20)" class="text-body1">
              {{ paragraph }}
            </p>
          </q-card-section>
        </q-card>
        
        <q-card class="q-mb-md">
          <q-card-section>
            <div class="text-h5 q-mb-md">教育经历</div>
            <q-timeline color="primary">
              <q-timeline-entry v-for="education in profile.education" :key="education.degree"
                :title="education.degree"
                :subtitle="education.school + ' | ' + education.date"
                icon="school"
              >
                <div>{{ education.description }}</div>
              </q-timeline-entry>
            </q-timeline>
          </q-card-section>
        </q-card>
      </div>

      <!-- 右侧 -->
      <div class="col-12 col-md-4">
        <q-card class="q-mb-md">
          <q-card-section>
            <div class="text-h5 q-mb-md">技能专长</div>
            
            <div v-for="category in profile.skills" :key="category.category" class="q-mb-lg">
              <div class="text-subtitle1 q-mb-sm">{{ category.category }}</div>
              <div class="row q-col-gutter-sm">
                <div v-for="skill in category.items" :key="skill.name" class="col-12 q-mb-sm">
                  <div class="text-caption text-weight-medium">{{ skill.name }}</div>
                  <q-linear-progress :value="skill.level / 100" class="q-mt-xs" rounded size="md" color="primary" />
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>

        <q-card class="q-mb-md">
          <q-card-section>
            <div class="text-h5 q-mb-md">兴趣爱好</div>
            <div class="row q-col-gutter-sm q-mb-sm">
              <div v-for="hobby in profile.hobbies" :key="hobby" class="col-auto">
                <q-chip outline color="primary">{{ hobby }}</q-chip>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const profile = ref({
  name: 'Ethan Zheng',
  title: '前端开发工程师',
  bio: '热爱编程，专注于前端技术和用户体验设计。5年开发经验，熟悉多种前端框架和工具。',
  avatar: '/pic/1.jpg',
  details: {
    location: { 
      label: '地点',
      value: '浙江 温州', 
      icon: 'place' 
    },
    email: { 
      label: '邮箱',
      value: '20249054@wzbc.edu.cn', 
      icon: 'email' 
    },
    website: { 
      label: '个人网站',
      value: 'https://gitee.com/mei-chun-zheng', 
      icon: 'language' 
    },
    phone: { 
      label: '电话',
      value: '13612042860', 
      icon: 'phone' 
    },
  },
  contacts: [
    { name: 'Gitee', icon: 'fab fa-git-alt', link: 'https://gitee.com/mei-chun-zheng', color: 'green' },
    { name: '小红书', icon: 'favorite', link: 'https://www.xiaohongshu.com/explore', color: 'red' },
    { name: '微博', icon: 'fab fa-weibo', link: 'https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F', color: 'orange' },
  ],
  aboutMe: [
    '我是一名热爱技术的前端开发工程师，拥有5年的工作经验。我专注于创建高性能、用户友好的web应用程序，热衷于学习新技术和解决复杂问题。',
    '在过去的项目中，我负责设计和实现前端架构，优化用户体验，并与后端团队紧密合作以确保产品的顺利交付。我熟悉多种前端框架和工具，包括Vue、React、Angular等。',
    '我相信良好的用户体验源于对细节的关注和对用户需求的深入理解。我喜欢参与产品的整个生命周期，从概念设计到最终发布。'
  ],
  education: [
    {
      school: '北京大学',
      degree: '计算机科学 硕士',
      date: '2015 - 2018',
      description: '主修人机交互、数据可视化和Web技术。参与了多个研究项目和学生组织。'
    },
    {
      school: '清华大学',
      degree: '计算机科学 学士',
      date: '2011 - 2015',
      description: '主修软件工程、算法和数据结构。获得优秀毕业生称号。'
    }
  ],
  skills: [
    {
      category: '编程语言',
      items: [
        { name: 'JavaScript/TypeScript', level: 95 },
        { name: 'HTML5/CSS3', level: 90 },
        { name: 'Python', level: 75 },
        { name: 'Java', level: 60 },
      ]
    },
    {
      category: '框架与库',
      items: [
        { name: 'Vue.js', level: 95 },
        { name: 'React', level: 85 },
        { name: 'Node.js', level: 80 },
        { name: 'Quasar', level: 85 },
      ]
    },
    {
      category: '工具与平台',
      items: [
        { name: 'Git', level: 90 },
        { name: 'Docker', level: 70 },
        { name: 'Webpack', level: 80 },
        { name: 'AWS', level: 65 },
      ]
    }
  ],
  hobbies: ['摄影', '旅行', '阅读', '音乐', '编程', '电影']
})
</script>

<style scoped>
.profile-header-card {
  border-radius: 12px;
  overflow: hidden;
}

.q-card {
  border-radius: 12px;
}
</style> 